<template>
  <div class="input-outer">
    <div
      id="timInput"
      class="input-inner"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { init, exec } from 'lib/pell'
let editor: any
export default Vue.extend({
  props: {
    maxLength: {
      type: Number,
      default: 500,
    },
  },
  mounted () {
    editor = init({
      element: document.getElementById('timInput') as any,
      // actions: [],
      // onChange: (html: string) => { console.log(html) },
      onKeydown: e => {
        if (e.keyCode > 46 && this.getContent().length > this.maxLength) {
          e.preventDefault()
          e.returnValue = false
          return true
        }
        return false
      },
    })
    editor.content.innerHTML = ' '
    console.log(editor)
  },
  methods: {
    // focus () {
    //   editor.content.focus()
    // },
    isInEditor () {
      const selection = getSelection()
      let node: HTMLElement | null = selection && selection.anchorNode as HTMLElement
      while (node) {
        if (node.className === 'pell-content') {
          console.log('isInEditor', true)
          return true
        }
        node = node.parentElement
      }
      console.log('isInEditor', false)
      return false
    },
    setCaret () {
      const el = editor.content
      let range = document.createRange()
      let sel = window.getSelection()!
      console.log('selection', sel)
      const lastChildNode = el.childNodes[el.childNodes.length - 1]
      range.setStart(lastChildNode, lastChildNode.length)
      // el.childNodes[2].length
      range.collapse(true)
      sel.removeAllRanges()
      sel.addRange(range)
      // el.focus()
    },
    insertEmoji (imgName: string) {
      if (this.getContent().length > this.maxLength) {
        return
      }
      if (!this.isInEditor()) {
        this.setCaret()
      }
      const result = exec('insertImage', '/emoji/png/' + imgName)
      console.log('insertEmoji', imgName, result)
    },
    getContent () {
      // return editor.getContent({
      //   emojiSign: ['#[', ']#'],
      //   blockSign: ';',
      // }).text.replace('<br>', '')
      let content = ''
      Array.prototype.forEach.call((editor.content as HTMLDivElement).childNodes,
        (divOrImg: HTMLElement) => {
          if (divOrImg.nodeName === 'IMG') {
            content += `#[huikaoba_${(divOrImg as HTMLImageElement).src.split('huikaoba_')[1]}]#`
            return
          } else if (divOrImg.nodeName === '#text') {
            content += divOrImg.nodeValue
            return
          }
          const divContent = Array.prototype.map.call(divOrImg.childNodes, (node: ChildNode) => {
            if (node.nodeName === '#text') {
              return node.nodeValue
            } else if (node.nodeName === 'IMG') {
              return `#[huikaoba_${(node as HTMLImageElement).src.split('huikaoba_')[1]}]#`
            }
          }).join('')
          content += divContent
        })
      return content
    },
    clearContent () {
      editor.content.innerHTML = ''
    },
  },
})
</script>
<style lang="scss" scoped>
.input-outer {
  padding: 10px 40px;
  // height: 80px;
  // border-radius: 20px;
  background: #f3f3f3;
}
.input-inner {
  /deep/ {
    .pell-content {
      height: 48px;
      line-height: 48px;
      font-size: 30px;
      outline: none;
      overflow-y: auto;
    }
    // .pell-actionbar {
    //   display: none;
    //   // background-color: #fff;
    //   // border-bottom: 1px solid hsla(0, 0%, 4%, 0.1);
    // }
    // .pell-button {
    //   background-color: transparent;
    //   border: none;
    //   cursor: pointer;
    //   height: 30px;
    //   outline: 0;
    //   width: 30px;
    //   vertical-align: bottom;
    // }
    // .pell-button-selected {
    //   background-color: #f0f0f0;
    // }
    img {
      width: 36px;
    }
  }
}
</style>
